///////////////封装
function $(id) {
    return document.getElementById(id);
}
class Glass {
    constructor() {
        this.outbox = $("outbox");
        this.midbox = $("midbox");
        this.midimg = this.midbox.children[0];
        this.glass = $("glass");
        this.big = $("big");
        this.bigimg = this.big.children[0];
        this.sambox = $("sambox");
        this.samboximg = this.sambox.children;
        this.move(); //调用
    }
    move() {
        this.midbox.onmouseover = () => {
            this.glass.style.display = "block";
            this.big.style.display = "block";
        };
        this.midbox.onmouseout = () => {
            this.glass.style.display = "none";
            this.big.style.display = "none";
        };
        this.midbox.onmousemove = (e) => {
            let evt = e || event;
            //////////////////////////////////////////
            let maxW = this.midbox.offsetWidth - this.glass.offsetWidth;
            let maxH = this.midbox.offsetHeight - this.glass.offsetHeight;

            let x =
                evt.pageX - this.outbox.offsetLeft - this.glass.offsetWidth / 2;
            let y =
                evt.pageY - this.outbox.offsetTop - this.glass.offsetHeight / 2;

            x = x <= 0 ? 0 : x >= maxW ? maxW : x;
            y = y <= 0 ? 0 : y >= maxH ? maxH : y;

            this.glass.style.left = x + "px";
            this.glass.style.top = y + "px";

            this.bigimg.style.left = -2 * x + "px";
            this.bigimg.style.top = -2 * y + "px";
        };
        for (let i = 0; i < this.samboximg.length; i++) {
            this.samboximg[i].onclick = () => {
                this.midimg.src = this.bigimg.src = this.samboximg[i].src;
            };
        }
    }
}
new Glass();